﻿		<div id="content">
			<div class="profileform" id="profilewidget">
			{if $owner}
				{if !empty($error)}<div class="error">{$error}</div>{/if}
				{if !empty($success)}<div class="success">{$success}</div>{/if}
			{/if}
			{if $owner}
				<div class="tabnav">
					<ul>
						<li><a href="#profile">ข้อมูลส่วนตัว</a></li>
						<li><a href="#photo">รูปภาพ</a></li>
						<li><a href="#password">รหัสผ่าน</a></li>
						<li><a href="#design">รูปแบบ</a></li>
					</ul>
				</div>
			{/if}
				<div class="content">
					{if $owner}
					<div class="tabdiv">
						<form action="{$APP_URL}/profile" method="post" name="profile" id="profile" enctype="multipart/form-data">
							<table>
								<tr>
									<td width="150"><label>ไอดี</label></td>
									<td width="500">{$users.uid}</td>
								</tr>
								<tr>
									<td width="150"><label>กิ้ฟท์</label></td>
									<td width="500">{$users.gift}</td>
								</tr>								
								<tr>
									<td width="150"><label>ชื่อผู้ใช้</label></td>
									<td width="500">{$users.username}</td>
								</tr>
								<tr>
									<td width="150"><label>ชื่อใช้แสดง</label></td>
									<td width="500"><input type="text" class="input-text validate['length[0,20]']" name="realname" size="50" value="{$users.realname}" /></td>
								</tr>							
								<tr>
									<td width="150"><label>เพศ</label></td>
									<td width="500"><input type="radio" name="sex" value="male" {if $users.sex == 'male'}checked="checked"{/if} /> ชาย <input type="radio" name="sex" value="female" {if $users.sex == 'female'}checked="checked"{/if} /> หญิง</td>
								</tr>
								<tr>
									<td width="150"><label>อีเมล์</label></td>
									<td width="500"><input type="text" class="input-text validate['required','email']" name="email" size="50" value="{$users.email}" /></td>
								</tr>
							</table>
							<button type="submit" class="super secondary small">บันทึก</button>
							<button type="reset" class="super secondary small">ยกเลิก</button>
							<input type="hidden" name="session" value="{$user.session_id}" />
							<input type="hidden" name="action" value="editprofile">
						</form>
					</div>
					<div class="tabdiv">
						<form action="{$APP_URL}/profile" method="post" id="editphoto" enctype="multipart/form-data">
							<table>
								<tr>
									<td width="150"><label>รูปประจำตัว</label></td>
									<td width="500"><img class="avatar" src="{$APP_URL}/avatar/{$users.avatar}"/></td>
								</tr>
								<tr>
									<td width="150"></td>
									<td width="500"><input type="file" name="image" size="33" /></td>
								</tr>								
							</table>						
							<button type="submit" class="super secondary small">บันทึก</button>
							<button type="reset" class="super secondary small">ยกเลิก</button>
							<input type="hidden" name="session" value="{$user.session_id}" />
							<input type="hidden" name="avatar" value="{$users.avatar}">
							<input type="hidden" name="action" value="editphoto">
						</form>				
					</div>
					<div class="tabdiv">
						<form action="{$APP_URL}/profile" method="post" id="editpassword">
							<table>
								<tr>
									<td width="150"><label>รหัสผ่านเดิม</label></td>
									<td width="500"><input type="password" name="oldpassword" class="input-text validate['required']" size="50" /></td>
								</tr>							
								<tr>
									<td width="150"><label>รหัสผ่านใหม่</label></td>
									<td width="500"><input type="password" name="newpassword" class="input-text validate['required','length[4,-1]','alphanum']" size="50" /></td>
								</tr>
								<tr>
									<td width="150"><label>ยืนยันรหัสผ่าน</label></td>
									<td width="500"><input type="password" name="c-password" class="input-text validate['confirm[newpassword]']" size="50"></td>
								</tr>
							</table>						
							<button type="submit" class="super secondary small">บันทึก</button>
							<button type="reset" class="super secondary small">ยกเลิก</button>
							<input type="hidden" name="session" value="{$user.session_id}" />
							<input type="hidden" name="action" value="editpassword">
						</form>
					</div>
					<div class="tabdiv">
						<form action="{$APP_URL}/profile" method="post" id="editdesign" enctype="multipart/form-data">
							<table>
								<tr>
									<td width="150"><label>สึตัวอักษร</label></td>
									<td width="500"><div class="colorSelector" id="fontcolor_selector"><div style="background-color: {if empty($theme.fontcolor)}#666666{else}{$theme.fontcolor}{/if}"></div></div><input type="hidden" name="fontcolor" id="fontcolor_input" value="{if empty($theme.fontcolor)}#666666{else}{$theme.fontcolor}{/if}" /></td>
								</tr>							
								<tr>
									<td width="150"><label>สีลิงค์</label></td>
									<td width="500"><div class="colorSelector" id="linkcolor_selector"><div style="background-color: {if empty($theme.fontcolor)}#336699{else}{$theme.linkcolor}{/if}"></div></div><input type="hidden" name="linkcolor" id="linkcolor_input" value="{if empty($theme.linkcolor)}#336699{else}{$theme.linkcolor}{/if}" /></td>
								</tr>
								<tr>
									<td width="150"><label>สีพื้นหลัง</label></td>
									<td width="500"><div class="colorSelector" id="bgcolor_selector"><div style="background-color: {if empty($theme.fontcolor)}#dddddd{else}{$theme.bgcolor}{/if}"></div></div><input type="hidden" name="bgcolor" id="bgcolor_input" value="{if empty($theme.bgcolor)}#dddddd{else}{$theme.bgcolor}{/if}" /></td>
								</tr>
								<tr>
									<td width="150"><label>ภาพพื้นหลัง</label></td>
									<td width="500">
										<input type="hidden" name="bgimage" id="bgimage_input" value="{if !empty($theme.bgimage)}{$theme.bgimage.id}{/if}" />
										<div class="bgimage_selector" style="cursor:pointer;display:inline-block;width:80px;height:80px;border:1px solid #999;background:url({$APP_URL}/images/restore-icon-32.png)no-repeat center center;" fullsize="none" id="bgimage_selector_0"></div>
									{foreach from=$backgrounds item=t}
										<div class="bgimage_selector" style="cursor:pointer;display:inline-block;width:80px;height:80px;border:1px solid #999;background:url({$APP_URL}/images/background/{$t.thumb});" fullsize="{$t.full}" id="bgimage_selector_{$t.id}"></div>
									{/foreach}
									</td>
								</tr>
							</table>
							<button type="submit" class="super secondary small">บันทึก</button>
							<button type="reset" class="super secondary small">ยกเลิก</button>
							<input type="hidden" name="session" value="{$user.session_id}" />
							<input type="hidden" name="action" value="editdesign">
						</form>						
					</div>
					<link rel="stylesheet" media="screen" type="text/css" href="{$APP_URL}/js/colorpicker/css/colorpicker.css" />
					<script type="text/javascript" src="{$APP_URL}/js/colorpicker/js/colorpicker.js"></script>
					{literal}
					<script type="text/javascript">
					window.addEvent('domready', function(){
						new FormCheck('profile', {'trimValue': true});
						new FormCheck('editpassword', {'trimValue': true});
						new TabSwapper({
							selectedClass: 'selected',
							deselectedClass: '',
							tabs: $$('.tabnav li'),
							clickers: $$('.tabnav li a'),
							sections: $$('div.tabdiv'),
							cookieName: 'profile_tabs',
							smooth: true
						});
						jQuery('#fontcolor_selector').ColorPicker({
							onChange: function(hsb, hex, rgb) {
								jQuery('body').css('color', '#' + hex)
								jQuery('#fontcolor_selector div').css('backgroundColor', '#' + hex);
							},
							onSubmit: function(hsb, hex, rgb, el) {
								jQuery('#fontcolor_input').val('#' + hex);
								jQuery(el).ColorPickerHide();
							},
							onBeforeShow: function() {
								var color = jQuery('#fontcolor_input').val().replace('#', '');
								jQuery(this).ColorPickerSetColor(color);
							}
						});
						jQuery('#linkcolor_selector').ColorPicker({
							onChange: function(hsb, hex, rgb) {
								jQuery('a, a:link, a:visited').css('color', '#' + hex);
								jQuery('#linkcolor_selector div').css('backgroundColor', '#' + hex);
							},
							onSubmit: function(hsb, hex, rgb, el) {
								jQuery('#linkcolor_input').val('#' + hex);
								jQuery(el).ColorPickerHide();
							},
							onBeforeShow: function() {
								var color = jQuery('#linkcolor_input').val().replace('#', '');
								jQuery(this).ColorPickerSetColor(color);
							}
						});
						jQuery('#bgcolor_selector').ColorPicker({
							onChange: function(hsb, hex, rgb) {
								jQuery('body').css('backgroundColor', '#' + hex);
								jQuery('#bgcolor_selector div').css('backgroundColor', '#' + hex);
							},
							onSubmit: function(hsb, hex, rgb, el) {
								jQuery('#bgcolor_input').val('#' + hex);
								jQuery(el).ColorPickerHide();
							},
							onBeforeShow: function() {
								var color = jQuery('#bgcolor_input').val().replace('#', '');
								jQuery(this).ColorPickerSetColor(color);
							}
						});
						$$('.bgimage_selector').each(function(el){
							el.addEvent('click', function(){
								var id = el.getProperty('id').split('_')[2];
								var fullsize = el.getProperty('fullsize');
								$('bgimage_input').set('value', id);
								document.body.setStyle('background-image', 'url(' + APP.URL + '/images/background/' + fullsize + ')');
							});
						});
					});
					</script>
					<style type="text/css">
					.tabdiv {
						padding: 15px !important;
					}
					.colorSelector {
						cursor: pointer;
						position: relative;
						top: 0;
						left: 0;
						width: 36px;
						height: 36px;
						background: url({/literal}{$APP_URL}{literal}/js/colorpicker/images/select2.png);
					}
					.colorSelector div {
						position: absolute;
						top: 4px;
						left: 4px;
						width: 28px;
						height: 28px;
						background: url({/literal}{$APP_URL}{literal}/js/colorpicker/images/select2.png) center;
					}
					</style>
					{/literal}					
					{else}
						<fieldset>
							<legend>ข้อมูลส่วนตัวของ {$users.realname}</legend>
							<table>
								<tr>
									<td width="150"><img src="{$APP_URL}/avatar/{$users.avatar}" class="avatar" /></td>
									<td width="500">
									{if !$is_buddy}
										<a href="javascript:void(0)" class="secondary small super" id="{$users.uid}" onclick="toggleBuddy(this, APP.TOKEN);"><img src="{$APP_URL}/images/add-buddy.png" border="0" align="top" /> เพิ่มเป็นเพื่อน</a>
									{else}
										<a href="javascript:void(0)" class="secondary small super" id="{$users.uid}" onclick="toggleBuddy(this, APP.TOKEN);"><img src="{$APP_URL}/images/remove-buddy.png" border="0" align="top" /> เลิกเป็นเพื่อน</a>	
									{/if}
									</td>
								</tr>
								<tr>
									<td width="150"><label>ไอดี</label></td>
									<td width="500">{$users.uid}</td>
								</tr>								
								<tr>
									<td width="150"><label>กิ้ฟท์</label></td>
									<td width="500">{$users.gift}</td>
								</tr>									
								<tr>
									<td width="150"><label>ชื่อผู้ใช้</label></td>
									<td width="500">{$users.username}</td>
								</tr>
								<tr>
									<td width="150"><label>ชื่อใช้แสดง</label></td>
									<td width="500">{$users.realname}</td>
								</tr>						
								<tr>
									<td width="150"><label>เพศ</label></td>
									<td width="500">{if $users.sex == 'male'}ชาย{else}หญิง{/if}</td>
								</tr>
								<tr>
									<td width="150"><label>อีเมล์</label></td>
									<td width="500">{$users.email}</td>
								</tr>					
							</table>
						</fieldset>
					{/if}
				</div>
			</div>		
			<div style="clear: both;">&nbsp;</div>
		</div>
		<!-- end #content -->